<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      <link
      rel="shortcut icon"
      href="http://www.shopin.net/static/favicon.ico"
      type="image/x-icon"
    />
    <title>我的购物车</title>
    @@include("./components/link2.html")
    <link rel="stylesheet" href="./css/cart.css" />
  </head>
  <body>
    <!-- 头部 -->
    @@include("./components/header.html")
    <!-- 购物车页面内容 -->
    <a href="http://127.0.0.1:5500/dist/category.html">继续选购</a>
    <div class="banxin">
      <div class="container-cart">
        <div class="header-cart">
          <span class="column"> <input type="checkbox" /> 全选</span>
          <span class="column goods"> 商品 </span>
          <span class="column t-props"></span>
          <span class="column">单价</span>
          <span class="column">数量</span>
          <span class="column">小计</span>
          <span class="column">操作</span>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    @@include("./components/footer.html")
    <script src="./javascripts/jQuery.js"></script>
    <script>
      $(function () {
        var cart = (function () {
          // 如果购物车数据存在,那么我们就把购物车数据变成对象；
          // 如果购物车数据解释时报错我们就重新创建新的的购物车数据;
          if (localStorage.getItem("cart")) {
            var data = null;
            try {
              data = JSON.parse(localStorage.getItem("cart"));
            } catch (e) {
              data = {};
            }

            return data;
          } else {
            return {};
          }
        })();
        console.log(cart);
        // 根据cart的数据渲染页面;

        var html = "";

        // 拼接html结构 :
        for (var attr in cart) {
          html += `<div class="t-body">
                              <div class="item-list">
                                    <div class="item-form">
                                          <input type="checkbox" name="" id="">
                                          <img src="${cart[attr].image}" alt="">
                                          <div class="title">${cart[attr].title}</div>
                                          <div class="prcie">￥${cart[attr].price}</div>
                                          <div class="cart-count">
                                                <button>-</button>
                                                <input type="text" value="${cart[attr].count}">
                                                <button>+</button>
                                          </div>
                                          <div class="sum">￥${cart[attr].count * cart[attr].price}</div>
                                          <div class="option">
                                                <a href="javascript:void(0)" data-id="${attr}">删除</a>
                                          </div>
                                    </div>
                              </div>
                        </div>`;
        }

        $(".container-cart").append(html);
      });
    </script>
  </body>
</html>
